<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo2</title>
    <link rel="stylesheet" href="demo_2_5_1.css">
</head>
<script src="Tools/jquery-2.0.0.min.js"></script>
<script>

    // $(document).ready(function(){
    //     $("button").click(function(){    
    //         $("span").parent().css({"color":"red","border":"2px solid red"});
    //     });
    // });    
    $(document).ready(function(){
         $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
    });

    // $(document).ready(function(){
    //     $("button").click(function(){
    //         // alert("span的父元素是"+$("span").parent());
    //         $("span").parent().css("color","red")
    //         // console.log();
    //     });
    // });

    // $(document).ready(function(){
    //     $("button").click(function(){
    //         var txt="";
    //         txt+="div 宽度: " + $("#div1").width() + "</br>";
    //         txt+="div 高度: " + $("#div1").height() + "</br>";
    //         txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
    //         txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
    //         $("#div1").html(txt);
    //         // var txt="";
    //         // txt+="div 的宽度是: "+$("#div1").width()+"</br>";
    //         // txt+="<p>div 的高度是 "+$("#div1").height() +"</p>"
    //         // $("#div1").text(txt);
    //     });
    // });

    // $(document).ready(function(){
    //     $("button").click(function(){
            
    //     });
    // });    

    // $(document).ready(function(){
    //     $("button").click(function(){
    //         $("h1,h2,p").toggleClass("blue");
    //         $("div").toggleClass("important blue");
    //     });
    // });

    // $(document).ready(function(){
    //     $("button").click(function(){
    //         $("p").remove(".italic");
    //     });
    // });

    // $(document).ready(function(){
    //     $("button").click(function(){
    //         $("#div1").empty();
    //     });
    // });
    // function appendText(){
    //     var txt1="<p>这是通过HTML标签创建文本</p>";
    //     var txt2=$("<p></p>").text("通过jQuery创建文本");
    //     var txt3=document.createElement("p");   
    //     txt3.innerHTML="使用 DOM 创建文本 text";
    //     $("body").append(txt1,txt2,txt3);     //  追加新元素
    // }

    // $(document).ready(function(){
    //     // $("#btn1").click(function(){
    //     //     $("p").append("<p style='color: red;'>这是使用append（）方法添加的段落。</p>")
    //     // });
    //     // $("#btn2").click(function(){
    //     //     $("p").prepend("<p style='color: green;'>这是使用prepend（）方法添加的段落。</p>")
    //     // });
    //     $("#btn1").click(function(){
    //         $("p").after("<p style='color: red;'>这是使用after（）方法添加的段落。</p>")
    //     });
    //     $("#btn2").click(function(){
    //         $("p").before("<p style='color: green;'>这是使用before（）方法添加的段落。</p>")
    //     });
    
    // });
    // $(document).ready(function(){
    //     $("button").click(function(){
    //         alert($("#runoob").attr("class"));
    //     });
    // });

    // $(document).ready(function(){

    //     $("button").click(function() {
    //         alert("值为: "+$("#test").val())
    //     });
        // $("#btn1").click(function(){
        //     alert("通过text方法获得的元素文本内容为: "+$("#test").text());
        // });

        // $("#btn2").click(function(){
        //     alert("通过html方法获得所选元素的内容为: "+$("#test").html());
        // });
    // });
    // $(document).ready(function() {
    //     $("#btn1").click(function(){
    //         alert("通过text方法获得的元素文本内容为: "+$("#test").text());
    //     });

    //     $("#btn2").click(function(){
    //         alert("通过html方法获得所选元素的内容为: "+$("#test").html());
    //     });

    // });

</script>

<body>
    body (曾曾祖父元素)
    <div class="ancestors"> div (曾祖父元素)
        <div style="width: 500px;">
            <ul> ul (祖父元素) 
                <li> li (父元素)
                    <span>span</span>
                </li>
            </ul>
        </div>
    </div>

    <!-- <div style="width:500px;">div (祖父元素)   
        <p>p (父元素)
            <span>span</span>
          </p> 
      </div>
    </div>
    <button>点击显示父元素</button> -->

    <!-- <div>
        怎么说呢
        <span>
            span随便写点什么
        </span>
    </div>
    <button>点击显示父元素</button> -->
    <!-- <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
    <br>
    <button>显示 div 元素的尺寸</button>
    <p>width() - 返回元素的宽度</p>
    <p>height() - 返回元素的高度</p> -->
    <!-- <h2>这是一个标题</h2>
    <p style="background-color:#ff0000">这是一个段落。</p>
    <p style="background-color:#00ff00">这是一个段落。</p>
    <p style="background-color:#0000ff">这是一个段落。</p>
    <button>返回第一个 p 元素的 background-color </button> -->
    <!-- <h1>标题 1</h1>
    <h2>标题 2</h2>
    <p>这是一个段落。</p>
    <p>这是另外一个段落。</p>
    <div>这是一些重要的文本!</div>
    <br>
    <button>为元素添加 class</button> -->
    <!-- <p>这是一个段落。</p>
    <p class="italic"><i>这是另外一个段落。</i></p>
    <p class="italic"><i>这是另外一个段落。</i></p>
    <button>移除所有  class="italic" 的 p 元素。</button> -->
    <!-- <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

        这是 div 中的一些文本。
        <p>这是在 div 中的一个段落。</p>
        <p>这是在 div 中的另外一个段落。</p>
    </div>
    <br>
    <button>移除div元素</button> -->
    <!-- <button onclick="appendText()">追加文本</button> -->
    <!-- <p>这是第一个段落。</p>
    <p>这是第二个段落。</p>
    <p>这是第三个段落。</p>
    <button id="btn1">添加文本1</button>
    <button id="btn2">添加文本2</button> -->
    <!-- <p><a href="http://www.runoob.com" id="runoob" class="菜鸟">菜鸟教程</a></p>
    <button>显示 href 属性的值</button> -->
    <!-- <p>名称: <input type="text" id="test"></p>
    <button>显示值</button>
     <p id="test">你是最棒的<b>粗体</b> 文本。</p>
    <button id="btn1">显示文本</button>
    <button id="btn2">显示 HTML</button> -->
    
</body>
</html>


